import React, { Component } from 'react';
import css from './index.less';
import FilterSearch from '@/components/FilterSearch';
import TableList from '@/components/TableList';
import EditModal from '@/components/EditModal';
import { Button, Divider } from 'antd';
import { connect } from 'dva';
import AuthButton from '@/components/AuthButton';

type State = {
  selectProject: any;
};
type Props = {
  dispatch: Function;
};
class Department extends Component<Props> {
  state: State = {
    selectProject: {},
  };
  table = null;

  rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      this.setState({
        selectProject: selectedRows[0],
      });
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };
  /**
   * 除岗位
   * @param data
   */
  delete(data) {
    this.props
      .dispatch({
        type: 'base/delete',
        payload: {
          url: '/api/examine/v1/person/del',
          type: '评审专家',
          data: data,
        },
      })
      .then(res => this.table.fetch());
  }
  filters = [
    {
      key: 'gender',
      type: 'select',
      label: '性别',
      options: [
        {
          label: '男',
          value: 'MALE',
        },
        {
          label: '女',
          value: 'FEMALE',
        },
      ],
    },
    {
      key: 'name',
      type: 'input',
      label: '姓名',
      placeholder: '请输入姓名',
    },
    {
      key: 'idNo',
      type: 'input',
      label: '身份证号',
      placeholder: '请输入身份证号',
    },
    {
      key: 'mobile',
      type: 'input',
      label: '手机号',
      placeholder: '请输入手机号',
    },
    {
      key: 'domain',
      type: 'input',
      label: '擅长领域',
      placeholder: '请输入擅长领域',
    },
  ];
  goDetail = (data: any, readOnly: boolean) => {
    const url = `juryManage/adjudicator/edit?id=${data.uuid ||
      ''}&readOnly=${readOnly || ''}`;
    this.props.dispatch({
      type: '$router/forward',
      payload: {
        url,
      },
    });
  };
  columns = [
    { title: '专家ID', dataIndex: 'id', width: 150 },
    {
      title: '姓名',
      dataIndex: 'name',
      render: (text, data) => (
        <Button type="link" onClick={() => this.goDetail(data, true)}>
          {text}
        </Button>
      ),
    },
    {
      title: '性别',
      dataIndex: 'gender',
      render: text => (text == 'MALE' ? '男' : '女'),
    },
    { title: '身份证号', dataIndex: 'idNo', width: 200 },
    { title: '手机号码', dataIndex: 'mobile' },
    { title: '职称', dataIndex: 'title' },
    { title: '工作单位', dataIndex: 'org' },
    { title: '擅长领域', dataIndex: 'domain' },
    {
      title: '操作',
      width: 325,
      render: (text, data) => (
        <span key={text}>
          <AuthButton
            onClick={() => this.goDetail(data)}
            role="edit_examine_expert"
          >
            编辑
          </AuthButton>
          <Divider type="vertical" />
          <AuthButton
            onClick={() => this.delete(data)}
            role="del_examine_expert"
          >
            删除
          </AuthButton>
        </span>
      ),
    },
  ];
  render() {
    const { selectProject } = this.state;
    return (
      <div>
        <FilterSearch
          filters={this.filters}
          onSearch={val => this.table.fetch(val)}
        >
          <AuthButton
            onClick={this.goDetail}
            type="primary"
            role="add_examine_expert"
          >
            添加
          </AuthButton>
          {/* <Button
            onClick={() => this.transferProject(5)}
            disabled={!selectProject}
          >
            导入
          </Button>
          <Button
            onClick={() => this.transferProject(1)}
            disabled={!selectProject}
          >
            导出
          </Button> */}
        </FilterSearch>
        <TableList
          tableProps={{
            rowSelection: {
              type: 'radio',
              ...this.rowSelection,
            },
          }}
          post
          rowKey="id"
          onRef={c => {
            this.table = c;
          }}
          columns={this.columns}
          source="/api/examine/v1/person/query"
        />
      </div>
    );
  }
}

export default connect(state => state.base)(Department);
